@mixin background-gradient($start-color, $end-color, $orientation) {
  background: $start-color;

  @if $orientation == 'vertical' {
    background: linear-gradient(to bottom, $start-color, $end-color);
  } @else if $orientation == 'horizontal' {
    background: linear-gradient(to right, $start-color, $end-color);
  } @else {
    background: linear-gradient($orientation, $start-color, $end-color);
  }
}

$grid-breakpoints: (
  phone: $screen-phone,
  tabletPortrait: $screen-tablet-portrait,
  tabletLandscape: $screen-tablet-landscape,
  smallDesktop: $screen-small-desktop,
  largeDesktop: $screen-large-desktop,
);
@mixin mediaMin($breakpoint-name) {
  @if map-has-key($grid-breakpoints, $breakpoint-name) {
    @media (min-width: #{map_get($grid-breakpoints, $breakpoint-name)}) {
      @content;
    }
  } @else {
    @error "breakpoint not supported!";
  }
}

$grid-breakpoints-max: (
  phone: $screen-phone-max,
  tabletPortrait: $screen-tablet-portrait-max,
  tabletLandscape: $screen-tablet-landscape-max,
  smallDesktop: $screen-small-desktop-max,
  largeDesktop: $screen-large-desktop-max,
);

@mixin mediaMax($breakpoint-name) {
  @if map-has-key($grid-breakpoints-max, $breakpoint-name) {
    @media (max-width: #{map_get($grid-breakpoints-max, $breakpoint-name)}) {
      @content;
    }
  } @else {
    @error "breakpoint not supported!";
  }
}
